<template>
  <div class="userFocu">
    <mynav title="关注" :path="path"> </mynav>
    <div class="content">
      <div class="list" v-for="(item, index) in focuList" :key="index">
        <img v-if="item.photo" class="c1" :src="item.photo" alt="" />
        <img v-else class="c1" src="@/assets/moto.jpg" alt="" />
        <div class="c2">
          <div class="nickname">{{ item.name }}</div>
          <span class="fans">粉丝数 {{ item.fans_count }}</span>
        </div>
        <div class="c3">
          <van-button type="danger" size="small">已关注</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userFollowings } from '@/api/user.js'
import mynav from '@/components/mynav.vue'
export default {
  components: {
    mynav
  },
  data () {
    return {
      path: '/home/user',
      focuObj: {
        1: '关注',
        2: '互相关注',
        3: '已关注'
      },
      focuList: []
    }
  },
  async created () {
    const res = await userFollowings()
    this.focuList = res.data.results
    window.console.log(res.data.results)
  }
}
</script>

<style lang="less">
.userFocu {
  .content {
    padding: 15px 15px;
    .list {
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .c1 {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #ccc;
      }
      .c2 {
        flex: 1;
        padding-left: 10px;
        .nickname {
          padding-top: 7px;
          font-family: MicrosoftYaHei;
          font-size: 14px;
          font-weight: 600;
          font-stretch: normal;
          line-height: 15px;
          letter-spacing: 0px;
          color: #222222;
        }
        .fans {
          font-family: MicrosoftYaHei;
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 15px;
          letter-spacing: 0px;
          color: #999999;
          opacity: 0.9;
        }
      }
      //   .c3 {
      //     width: 80px;
      //     border-radius: 5px;
      //   }
    }
  }
}
</style>
